<template>
  <div class="tipsitem-container">
    {{userInfo.friends_circle.requested_list}}
    <main class="main">
      <article class="main-item">
        <article class="main-header">
          <section class="header-left"><el-avatar shape="square" :size="50" src="https://wx1.sinaimg.cn/mw2000/006Siou9ly8gw6hisz2f8j30ro0ro40c.jpg"></el-avatar></section>
          <section class="header-main">
            <h2>标题</h2>
          </section>
          <section class="header-right">
            <el-button type="danger" icon="el-icon-delete" circle></el-button>
          </section>
        </article>
        <article class="main-main">
          <section>
            <h2>类别：</h2>
            好友申请
          </section>
          <section>
            <h2>内容：</h2>
            加个好友呗
          </section>
        </article>
        <article class="main-footer">
          <el-button type="success">同意</el-button>
          <el-button type="info">已读</el-button>
        </article>
      </article>
    </main>
  </div>
</template>

<script>
export default {
  name: 'TipsItem',
  props: ['userInfo']
}
</script>

<style lang="less" scoped>
.main {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  margin: 10px 5px;
  background-color: #fff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  padding: 20px 50px;
  // margin-bottom: 10px;
}
.main-header {
  display: flex;
  flex: 1;
  margin-bottom: 8px;
}
.header-left {
  flex: 1;
}
.header-main {
  flex: 2;
}
.header-main h2 {
  font-size: 18px;
}
.header-right {
  text-align: right;
  flex: 1;
}
.main-main {
  margin-bottom: 8px;
  flex: 2;
  font-size: 16px;
}
.main-footer {
  flex: 1;
}
</style>
